<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/login.css">
    <link rel="stylesheet" href="/libs/swiper/css/swiper.min.css">
    <script src="/libs/swiper/js/swiper.min.js"></script>
    <script src="/libs/jquery/jquery-3.5.1.min.js"></script>
    <script src="/libs/jquery/jquery.lin-1.1.1.js"></script>
</head>

<body>
    <div class="qq"><a href="/html/denglu.html"><img src="/images/logoqq.png" alt="">QQ</a></div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" data-swiper-autoplay="2000">
                <img src="/images/denglu1.jpg" alt="">
            </div>
            <div class="swiper-slide" data-swiper-autoplay="2000">
                <img src="/images/denglu.jpg" alt="">
            </div>
            <div class="swiper-slide" data-swiper-autoplay="2000">
                <img src="/images/denglu2.jpg" alt="">
            </div>
        </div>
    </div>
    <div class="box">
        <h2>注册</h2><br>
        账号:<input type="text" id="nameInput"><br>
        密码:<input type="password" id="pwdInput"><br>
            <button class="btn-zhuce">注册账号</button>
    </div>
    
   <script>
       var mySwiper = new Swiper('.swiper-container', {
            autoplay: true,
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            }
        })
        $('.btn-zhuce').on('click',function () {
            let arr1 = []
            let arr = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : []
        const name = $('#nameInput').val(),
                  pwd = $('#pwdInput').val()
                  if(name=='' || pwd =='') {
                      alert('请输入正确的账号和密码')
                      return
                    }
                    for(var i = 0; i <arr.length;i++){
                        if(arr[i].username == name) {
                            alert('此用户已被注册')
                            return
                        }}
                    arr1.push({username:name,userpwd:pwd})
                    localStorage.setItem("userInfo",JSON.stringify(arr1))
                      alert('注册成功，请去登录')
                      location.href = './login.html'
                  })
        // const btn = document.querySelector("#btn")
        // const unameInput = document.querySelectorAll("input")[0]
        // const pwdInput = document.querySelectorAll("input")[1]

        // // 如果 localStorage里面本来就有数据 那么应该先取出来再往里面加
        // // let arr = []
        // let arr = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : []
        // // console.log(arr)
        // btn.onclick = function(){
        //     // 拿到用户输入的 用户名和密码
        //     let uname = unameInput.value
        //     let pwd = pwdInput.value
        //     // 往 localstorage 里面存数据
        //     arr.push({name:uname,password:pwd})
        //     localStorage.setItem("userInfo",JSON.stringify(arr))

        //     // 1、跳转到登录页面  2、跳转到 list 页面 
        //     // 编程式导航  
        //     window.open('/html/denglu.html')
        // }
   </script>
</body>

</html>